<template>
  <view class="search flex-space-between">
    <view class="s-left flex-space-between">
      <input v-model="info.params.key" placeholder="请输入赛事名称" placeholder-style="color:#BBBBBB;font-size:28rpx" />
      <image src="/static/icon/07.png" @click="search"></image>
    </view>
    <view class="s-right">
      <image @click="info.isShow = !info.isShow" v-if="!info.isShow" class="img" src="../../../static/icon/11.png"></image>
      <image @click="info.isShow = !info.isShow" v-if="info.isShow" class="img" src="../../../static/icon/08.png"></image>
    </view>
  </view>
  <u-mask :zoom="false" :show="info.isShow" :custom-style="{ height: tools.clientTopHight(50), bottom: 0, top: 'auto' }" @click="closeMask">
    <view class="menu flex-wrap" v-if="info.isShow">
      <view class="item" v-for="(item, index) in info.date" :key="index" :class="{ active: index == info.current }" @click.stop="itemClick(item, index)">
        {{ item.label }}
      </view>
    </view>
  </u-mask>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { getYear } from '@/service/api/index'
import tools from '@/utils/tools'

const emit = defineEmits(['change'])

let info = reactive({
  date: null,
  current: 0,
  isShow: false,
  params: {
    page: 1,
    year: '',
    key: ''
  }
})

// 获取日期
const getYearApi = async () => {
  const { msg } = await getYear()
  info.date = msg
}

const itemClick = (item: { label: string }, index: number) => {
  info.current = index
  info.params.year = item.label
  closeMask()
}

// 搜索
const search = () => {
  emit('change', info.params)
  info.isShow = !info.isShow
}

// 关闭mask
const closeMask = () => {
  info.isShow = !info.isShow
  emit('change', info.params)
}

onMounted(() => {
  // 获取日期
  getYearApi()
})
</script>

<style lang="scss" scoped>
.active {
  color: #fff;
  background: rgba(230, 66, 94);
}
.menu {
  padding: 14rpx 24rpx;
  background-color: #fff;
  .item {
    font-size: 28rpx;
    border-radius: 6rpx;
    margin-bottom: 12rpx;
    padding: 10rpx 22rpx;
  }
}

.search {
  width: 100%;
  position: fixed;
  padding: 18rpx 24rpx;
  background-color: #fff;
  .s-left {
    width: 616rpx;
    padding: 12rpx 0;
    border-radius: 32rpx;
    background-color: #f9f9f9;
    input {
      flex: 1;
      margin-right: 20rpx;
      margin-left: 36rpx;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 42rpx;
    }
  }
  .s-right {
    width: 46rpx;
    height: 48rpx;
    margin-left: 38rpx;
  }
}
</style>
